<template>
  <view class="printer">
    <!-- <uni-list>
      <uni-list-item :note="bleName" title="选择蓝牙打印机" @click="$goto('/pages/printer/select')"></uni-list-item>
    </uni-list>-->
    <mz-list>
      <mz-list-item title="选择蓝牙打印机" :note="bleName" @click.native="$goto('/pages/printer/select')"></mz-list-item>
      <mz-list-item title="打印份数">
        <template v-slot:right>
          <picker @change="handlePrintNum" :range="numRanges">
            <view class="uni-input">{{ settings.number }}</view>
          </picker>
        </template>
      </mz-list-item>
      <mz-list-item title="打印行距">
        <template v-slot:right>
          <picker @change="handlePrintLineSpace" :range="lineSpaceRanges">
            <view class="uni-input">{{ settings.lineSpace }}</view>
          </picker>
        </template>
      </mz-list-item>
      <mz-list-item :show-arrow="false" title="自动打印">
        <template v-slot:right>
          <switch :checked="settings.autoPrint" @change="autoPrintChange" />
        </template>
      </mz-list-item>
    </mz-list>
    <FooterButton @click.native="printTest">打印测试</FooterButton>
  </view>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import Form from "../../components/public/Form/index.vue";
import FormItem from "../../components/public/FormItem/index.vue";
import FooterButton from "../../components/public/Button/FooterButton.vue";
import { orderTestData } from "../../utils/printerData";
export default {
  components: {
    Form,
    FormItem,
    FooterButton
  },
  data() {
    return {
      numRanges: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], // 打印分数
      lineSpaceRanges: [0, 1, 2, 3, 4, 5, 6] // 打印分数
    };
  },
  computed: {
    ...mapState({
      bleList: state => state.printer.bleList
    }),
    ...mapGetters({ settings: "settings" }),
    bleName() {
      return (
        (this.bleList || [])
          .filter(v => v.connected == true)
          .map(v => v.name)
          .join(" / ") || null
      );
    }
  },
  methods: {
    ...mapMutations({
      SET_SETTINGS: "SET_SETTINGS",
      SET_PRINTER_SETTINGS: "SET_PRINTER_SETTINGS"
    }),
    goto(url) {
      this.$goto(url);
    },
    handlePrintNum(e) {
      this.SET_SETTINGS({ number: this.numRanges[e.detail.value] });
      this.SET_PRINTER_SETTINGS({ number: this.numRanges[e.detail.value] });
    },
    handlePrintLineSpace(e) {
      this.SET_SETTINGS({ lineSpace: this.lineSpaceRanges[e.detail.value] });
      this.SET_PRINTER_SETTINGS({ lineSpace: this.lineSpaceRanges[e.detail.value] });
    },
    autoPrintChange(e) {
      let value = e.detail.value;
      this.SET_SETTINGS({ autoPrint: value });
      this.SET_PRINTER_SETTINGS({ autoPrint: value });
      uni.showToast({
        icon: "none",
        title: "操作成功"
      });
    },
    printTest() {
      this.$printerUtil.printToAll(orderTestData());
    }
  }
};
</script>

<style lang="stylus">
.printer {
}
</style>
